import { Resizable } from 'react-resizable';
import React, { useEffect, useState } from 'react';
import { Table, Input, Button, Modal, Divider, Radio } from 'antd';
import request from 'umi-request';
import './index.less'; //内部样式的书写
import { DownOutlined } from '@ant-design/icons';
import { Col, Form, Row, Select, theme, message } from 'antd';
// import './iconfont/iconfont.css';
const { Option } = Select;

import {
  CarryOutOutlined,
  CheckOutlined,
  FormOutlined,
  MehOutlined,
} from '@ant-design/icons';
import { Switch, Tree } from 'antd';
const provinceData = ['总经办', '综合管理部', '投资发展部', '人事行政部'];

const cityData = {
  总经办: ['总经理', '副总经理'],
  综合管理部: ['总裁助理', '网络管理员', '法务专员'],
  投资发展部: [],
  人事行政部: [
    '人力资源主管',
    '行政主管',
    '招聘专员',
    '培训专员',
    '人力资源专员',
  ],
};
type CityName = keyof typeof cityData;
const EchartsTable = () => {
  // 选择联动
  const [cities, setCities] = useState(cityData[provinceData[0] as CityName]);
  const [secondCity, setSecondCity] = useState(
    cityData[provinceData[0] as CityName][0],
  );

  const handleProvinceChange = (value: CityName) => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
    setvalue7(value);
  };

  const onSecondCityChange = (value: CityName) => {
    setSecondCity(value);
    setvalue8(value);
  };

  // 添加
  const [ids, setids] = useState([]);
  // 选择
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setids(selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  const [selectionType, setSelectionType] = useState('checkbox');
  const [open1, setOpen1] = useState(false);
  const showModal = () => {
    setOpen1(true);
  };
  const hideModal = () => {
    setOpen1(false);
  };
  const [open2, setOpen2] = useState(false);
  const showModal2 = () => {
    setOpen2(true);
  };
  const hideModal2 = () => {
    console.log(ids);
    ids.map((item) => {
      request
        .delete('http://localhost:8597/hqh/get_personnel?id=' + item._id)
        .then((val1) => {
          request.get('http://localhost:8597/hqh/get_personnel').then((val) => {
            setDatalist(val.data);
            setPagecount(val.datacount);
            setPagesize(val.datapage);
          });
        });
    });
    setids([]);
    setOpen2(false);
  };

  const treeData = [
    {
      title: '总经办',
      key: '0-0',
      children: [
        {
          title: '综合管理部',
          key: '0-0-1',
          icon: <MehOutlined />,
        },
        {
          title: '投资发展部',
          key: '0-0-2',
          icon: <MehOutlined />,
        },
        {
          title: '人事行政部',
          key: '0-0-3',
          icon: <MehOutlined />,
        },
        {
          title: '财务部',
          key: '0-0-4',
          icon: <MehOutlined />,
        },
        {
          title: '企管部',
          key: '0-0-5',
          icon: <MehOutlined />,
        },
        {
          title: '研发部',
          key: '0-0-6',
          icon: <MehOutlined />,
        },
        {
          title: '经营部',
          key: '0-0-7',
          children: [
            {
              title: '市场部',
              key: '0-0-8',
              icon: <MehOutlined />,
            },
            {
              title: '销售部',
              key: '0-0-9',
              icon: <MehOutlined />,
            },
            {
              title: '渠道部',
              key: '0-0-10',
              icon: <MehOutlined />,
            },
            {
              title: '运维部',
              key: '0-0-11',
              icon: <MehOutlined />,
            },
            {
              title: '大客户部',
              key: '0-0-12',
              icon: <MehOutlined />,
            },
          ],
        },
        {
          title: '未知',
          key: '0-0-13',
          icon: <MehOutlined />,
        },
      ],
    },
  ];
  // 数组建
  const [showLine, setShowLine] = useState(true);
  const [showIcon, setShowIcon] = useState(false);
  const [showLeafIcon, setShowLeafIcon] = useState(true);
  const onSelect = (selectedKeys, info) => {
    console.log('selected', info.node.title);
    request
      .get('http://localhost:8597/hqh/get_personnel?name=' + info.node.title)
      .then((val) => {
        setDatalist(val.data);
        setPagecount(val.datacount);
        setPagesize(val.datapage);
      });
  };

  const [datalist, setDatalist] = useState([]); //  总数据渲染
  const [pagesize, setPagesize] = useState(0); // 一共多少页
  const [pagecount, setPagecount] = useState(0); // 数据条数
  const [inputpagesize, setiInputpagesize] = useState(1); // 输入框数据
  const [dcolumns, setDcolumns] = useState([]);
  const [components, setComponents] = useState({});
  const defaultColumns = [
    {
      title: '序号',
      key: '_id',
      width: 70,
      render: (text, record, index) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '档案ID',
      key: 'id',
      width: 250,
      dataIndex: 'id',
      ellipsis: true,
    },
    {
      title: '档案编号',
      dataIndex: 'ids',
      key: 'ids',
      ellipsis: true,
      width: 150,
    },
    {
      title: '真实姓名',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      width: 130,
      render: (text) => <a style={{ color: '#9682e4' }}>{text}</a>,
    },
    {
      title: '登陆账号',
      dataIndex: 'username',
      key: 'username',
      ellipsis: true,
      width: 130,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      ellipsis: true,
      width: 130,
    },
    {
      title: '联系电话',
      dataIndex: 'lianxidianhua',
      key: 'lianxidianhua',
      ellipsis: true,
      width: 130,
    },
    {
      title: '出生日期',
      dataIndex: 'chsshengriqi',
      key: 'chsshengriqi',
      ellipsis: true,
      width: 130,
    },
    {
      title: '所在部门',
      dataIndex: 'suozaibumeng',
      key: 'suozaibumeng',
      ellipsis: true,
      width: 130,
    },
    {
      title: '所在岗位',
      dataIndex: 'suozaigangwei',
      key: 'suozaigangwei',
      ellipsis: true,
      width: 130,
    },
    {
      title: '入职时间',
      dataIndex: 'ruzhishijain',
      key: 'ruzhishijain',
      ellipsis: true,
      width: 130,
    },
  ];
  const [value1, setvalue1] = useState('');
  useEffect(() => {
    console.log(localStorage.getItem('renyuan_id'));
    request
      .get(
        'http://localhost:8597/hqh/get_personnel?id=' +
          localStorage.getItem('renyuan_id'),
      )
      .then((val) => {
        console.log(val, 1111111111111111);
        setvalue_id(val.data[0]._id);
        setvalue1(val.data[0].id);
        setvalue2(val.data[0].ids);
        setvalue3(val.data[0].username);
        setvalue4(val.data[0].sex);
        setvalue5(val.data[0].name);
        setvalue6(val.data[0].lianxidianhua);
        setvalue7(val.data[0].suozaibumeng);
        setvalue8(val.data[0].suozaigangwei);
        setvalue9(val.data[0].lingdao_id);
      });
    setDcolumns(defaultColumns);
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);

  const ResizeableTitle = (props) => {
    const { onResize, width = 130, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
    (e, { size }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };

  const columns = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: (column) => ({
      width: col.width || 130, // 130 没有设置宽度可以在此写死 例如130试下
      onResize: handleResize(index),
    }),
  }));
  const listStyle = {
    lineHeight: '200px',
    textAlign: 'center',
    marginTop: 16,
  };
  // 表格输入数据
  const [value_id, setvalue_id] = useState('');
  const [value2, setvalue2] = useState('');
  const [value3_name, setvalue3] = useState('');
  const [value4, setvalue4] = useState('');
  const [value5, setvalue5] = useState('');
  const [value6, setvalue6] = useState('');
  const [value7, setvalue7] = useState('');
  const [value8, setvalue8] = useState('');
  const [value9, setvalue9] = useState('63dca9c9c297c599e45e05c5');
  return (
    <div className="echartstab">
      <div className="buttondata">
        <Button
        // onClick={() => {
        //   if (
        //     value2.length != 0 &&
        //     value3_name.length != 0 &&
        //     value4.length != 0 &&
        //     value5.length != 0 &&
        //     value6.length != 0 &&
        //     value7.length != 0 &&
        //     value8.length != 0 &&
        //     value9.length != 0
        //   ) {
        //     let insetdata = {
        //       id: value1, // 档案ID
        //       ids: value2, // 档案编号
        //       name: value5, // 真实姓名
        //       username: value3_name, // 登录账号
        //       sex: value4, // 性别
        //       lianxidianhua: value6, // 联系电话
        //       suozaibumeng: value7, // 所在部门
        //       suozaigangwei: value8, // 所在岗位
        //       lingdao_id: '63d8700739651041768abdb9', // 领导
        //     };
        //     if (value_id) {
        //       request
        //         .put(
        //           'http://localhost:8597/hqh/get_personnels?id=' + value_id,
        //           {
        //             data: { insetdata },
        //           },
        //         )
        //         .then((val111) => {
        //           request
        //             .get('http://localhost:8597/hqh/get_personnels')
        //             .then((val) => {
        //               // setvalue_id(val.data[0]._id)
        //               setvalue1(val.data[0].id);
        //               setvalue2(val.data[0].ids);
        //               setvalue3(val.data[0].username);
        //               setvalue4(val.data[0].sex);
        //               setvalue5(val.data[0].name);
        //               setvalue6(val.data[0].lianxidianhua);
        //               setvalue7(val.data[0].suozaibumeng);
        //               setvalue8(val.data[0].suozaigangwei);
        //               setvalue9(val.data[0].lingdao_id);
        //             });
        //         });
        //     } else {
        //       request
        //         .post('http://localhost:8597/hqh/get_personnels', {
        //           data: { insetdata },
        //         })
        //         .then((val11) => {
        //           request
        //             .get('http://localhost:8597/hqh/get_personnels')
        //             .then((val) => {
        //               console.log(val.data[0]._id);

        //               setvalue1(val.data[0].id);
        //               setvalue_id(val.data[0]._id);
        //               setvalue2(val.data[0].ids);
        //               setvalue3(val.data[0].username);
        //               setvalue4(val.data[0].sex);
        //               setvalue5(val.data[0].name);
        //               setvalue6(val.data[0].lianxidianhua);
        //               setvalue7(val.data[0].suozaibumeng);
        //               setvalue8(val.data[0].suozaigangwei);
        //               setvalue9(val.data[0].lingdao_id);
        //             });
        //         });
        //     }
        //   } else {
        //     message.error('请填写全部信息');
        //   }
        // }}
        >
          保存
        </Button>
        <Button
          className="button_nth2"
          onClick={() => {
            if (
              value2.length != 0 &&
              // value3_name.length != 0 &&
              value4.length != 0 &&
              value5.length != 0 &&
              value6.length != 0 &&
              value7.length != 0 &&
              value8.length != 0 &&
              value9.length != 0
            ) {
              let insetdata = {
                id: value_id, // 档案ID
                ids: value2, // 档案编号
                name: value5, // 真实姓名
                username: value3_name, // 登录账号
                sex: value4, // 性别
                lianxidianhua: value6, // 联系电话
                suozaibumeng: value7, // 所在部门
                suozaigangwei: value8, // 所在岗位
                lingdao_id: '63d8700739651041768abdb9', // 领导
              };

              request
                .put('http://localhost:8597/hqh/get_personnel?id=' + value_id, {
                  data: { insetdata },
                })
                .then((val) => {
                  setvalue1('');
                  setvalue2('');
                  setvalue3('');
                  setvalue4('');
                  setvalue5('');
                  setvalue6('');
                  setvalue7('');
                  setvalue8('');
                  setvalue_id('');
                });
              message.success('修改成功');
            } else {
              message.error('请填写全部信息');
            }
          }}
        >
          保存且新增
        </Button>
        <Button>草稿箱</Button>
        <Button
        // onClick={() => {
        //   if (value_id) {
        //     console.log(value_id);
        //     request
        //       .delete(
        //         'http://localhost:8597/hqh/get_personnels?id=' + value_id,
        //       )
        //       .then((val) => {
        //         setvalue1('');
        //         setvalue2('');
        //         setvalue3('');
        //         setvalue4('');
        //         setvalue5('');
        //         setvalue6('');
        //         setvalue7('');
        //         setvalue_id('');
        //         setvalue8('');
        //       });
        //   } else {
        //     message.error('没有要删除的数据');
        //   }
        // }}
        >
          删除
        </Button>
        <Button>导入</Button>
      </div>
      <div
        style={{ textAlign: 'center', marginBottom: '20px', fontSize: '23px' }}
      >
        人员档案
      </div>
      <div className="flexTable">
        <div className="container hou_1_preuodate">
          <div className="table_zidingyi">
            <table>
              <tbody>
                <tr>
                  <td
                    colSpan={6}
                    style={{
                      backgroundColor: '#eff4fd',
                      textAlign: 'left',
                      padding: '5px 10px',
                    }}
                  >
                    基本信息
                  </td>
                </tr>
                <tr>
                  <td>档案ID:</td>

                  <td>
                    <Input
                      placeholder="保存后自动生成"
                      disabled
                      value={value_id}
                    />
                  </td>
                  <td>档案编号:</td>
                  <td>
                    <Input
                      placeholder="请输入"
                      value={value2}
                      onChange={(e) => {
                        setvalue2(e.target.value);
                      }}
                    />
                  </td>
                  <td rowSpan={3}></td>
                  <td rowSpan={3}></td>
                </tr>
                <tr>
                  <td>登录账号:</td>
                  <td>
                    <Input
                      placeholder="请输入"
                      value={value3_name}
                      onChange={(e) => {
                        setvalue3(e.target.value);
                      }}
                    />
                  </td>
                  <td>性别:</td>
                  <td>
                    <Input
                      placeholder="请输入"
                      value={value4}
                      onChange={(e) => {
                        setvalue4(e.target.value);
                      }}
                    />
                  </td>
                </tr>
                <tr>
                  <td>真实姓名:</td>
                  <td>
                    <Input
                      placeholder="请输入"
                      value={value5}
                      onChange={(e) => {
                        setvalue5(e.target.value);
                      }}
                    />
                  </td>
                  <td>联系电话:</td>
                  <td>
                    <Input
                      placeholder="请输入"
                      value={value6}
                      onChange={(e) => {
                        setvalue6(e.target.value);
                      }}
                    />
                  </td>
                </tr>
                <tr>
                  <td>所在部门:</td>
                  <td>
                    <Select
                      style={{ width: 120 }}
                      onChange={handleProvinceChange}
                      options={provinceData.map((province) => ({
                        label: province,
                        value: province,
                      }))}
                    />
                    {/* <Input
                      placeholder="请输入"
                      value={value7}
                      onChange={(e) => {
                        setvalue7(e.target.value);
                      }}
                    /> */}
                  </td>
                  <td>所在岗位:</td>
                  <td>
                    <Select
                      style={{ width: 120 }}
                      value={secondCity}
                      onChange={onSecondCityChange}
                      options={cities.map((city) => ({
                        label: city,
                        value: city,
                      }))}
                    />
                    {/* <Input
                      placeholder="请输入"
                      value={value8}
                      onChange={(e) => {
                        setvalue8(e.target.value);
                      }}
                    /> */}
                  </td>
                  <td>直接上级:</td>
                  <td>
                    {/* <Input placeholder="请输入" value={value9} onChange={(e)=>{
                            setvalue9(e.target.value);
                      }}/> */}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {/* 删除弹出 */}
      <div className="modelSelect">
        <Modal
          closable={false}
          title="对话提示框"
          open={open1}
          onOk={hideModal}
          onCancel={hideModal}
          okText="确认"
          cancelText=""
        >
          <p>请选择要删除的数据</p>
        </Modal>

        <Modal
          title="删除提示"
          open={open2}
          onOk={hideModal2}
          onCancel={hideModal2}
          okText="确认"
          cancelText="取消"
        >
          <p>是否确定要删除选中记录？</p>
        </Modal>
      </div>
    </div>
  );
};

export default EchartsTable;
